<template>
  <page>
    <div class="an-goods-spec">
      <el-button type="primary" @click="addClick">新增</el-button>
      <el-table :data="list" style="width: 100%" v-loading="loading">
        <el-table-column prop="id" label="ID" width="180"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" size="small" @click="editClick(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="deleteClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <dialog-spec
      v-if="isVisible"
      v-model:isVisible="isVisible"
      :tage="tageData"
      @call-Back="getList"
    />
  </page>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import page from "@/components/Page/index.vue";
import dialogSpec from "./dialogSpec/index.vue";
import { GoodsSpec } from "@/utils/interface";

@Options({
  components: { page, dialogSpec },
})
export default class goodsSpec extends Vue {
  [x: string]: any;
  loading: Boolean = false;
  list: Array<GoodsSpec> = [];
  isVisible: Boolean = false;
  data() {
    return {
      tageData: {},
    };
  }

  created() {
    this.getList();
  }
  // 获取分类数据
  getList() {
    this.loading = true;
    this.API.goodsSpecList().then((res: Array<GoodsSpec>) => {
      this.loading = false;
      this.list = res;
    });
  }

  // 新增
  addClick() {
    this.tageData = {};
    this.isVisible = true;
  }

  // 编辑
  editClick(item: GoodsSpec) {
    this.isVisible = true;
    this.tageData = item;
  }

  // 删除
  deleteClick(item: GoodsSpec) {
    this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        this.API.goodsSpecDelete(item.id).then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getList();
        });
      })
      .catch(() => {});
  }
}
</script>
